<template>
  <div id="app">
    <div v-if="$route.path !== '/login'" class="tabs">
      <ul>
        <li><router-link to="/goods">商品</router-link></li>
        <li><router-link to="/orders">订单</router-link></li>
        <li><button v-on:click="logout" class="button is-text">注销</button></li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
  name: 'App',
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  watch: {
    user() {
      if (this.user) {
        this.updateInitialState();
      }
    }
  },
  methods: {
    updateInitialState() {
      console.log('调用updateInitialState');
      this.$store.dispatch('getGoodItems');
      this.$store.dispatch('getOrderItems');
    },
    logout() {
      this.$store.dispatch('logout').then(() => {
          this.$router.push("/login");
      });
    }
  }
}
</script>

<style>
#app {
  height: inherit;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
</style>
